<template>
  <div class="container" id="pdfDom">
    <n-form
      ref="formRef"
      :label-width="80"
      :model="formValue"
      :rules="rules"
      :size="small"
      label-width="auto"
      label-align="left"
    >
      <div class="head">
        <div class="head-title">
          <div class="title-text">个人简历</div>
        </div>

        <div class="head-content">
          <div class="img">
            <img src="../../../assets/imgs/resume/avatar.jpg" alt="" />
          </div>

          <div class="info">
            <div class="info-top">
              <svg-icon name="name"></svg-icon>
              <div class="name">姓名: {{ studentInfo.name }}</div>
            </div>
            <div class="info-down">
              <svg-icon name="age"></svg-icon>
              <div class="age">年龄：{{ studentInfo.age }}</div>

              <svg-icon name="phone"></svg-icon>
              <div class="phone">电话：{{ studentInfo.phone }}</div>

              <svg-icon name="mail"></svg-icon>
              <div class="mail">邮箱：{{ studentInfo.email }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>教育经历
          </div>
          <div class="content-list-content">
            {{ studentInfo.educational_experience }}
          </div>
        </div>

        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>专业技能
          </div>
          <div class="content-list-content">
            {{ studentInfo.skill }}
          </div>
        </div>

        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>项目经历
          </div>
          <div class="content-list-content">
            {{ studentInfo.project_experience }}
          </div>
        </div>

        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>期望职位
          </div>
          <div class="content-list-content">
            {{ studentInfo.dream_position }}
          </div>
        </div>

        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>期望薪资
          </div>
          <div class="content-list-content">
            {{ studentInfo.dream_salary }}
          </div>
        </div>

        <div class="content-list">
          <div class="content-list-title">
            <svg-icon name="rectangle"></svg-icon>自我评价
          </div>
          <div class="content-list-content">
            {{ studentInfo.self_evaluation }}
          </div>
        </div>

        <div class="btn">
          <n-button type="primary" @click="exportPDF" :class="{ isShow }"
            >导出PDF</n-button
          >
        </div>
      </div>
    </n-form>
  </div>
</template>

<script setup>
//引入接口
import { getStudentInfo, getStudentPicture } from "@/http/api/student"
import htmlToPdf from "@/plugins/htmlToPdf"
import { ref, onMounted, computed } from "vue"
// 定义属性
let isShow = ref(false)
const stripImg = ref(require("@/assets/imgs/resume/resume-strip.png"))
const dividerImg = ref(require("@/assets/imgs/resume/resume-divider.png"))
const studentInfo = ref({})
const avatar = ref()
const uid = ref()

// 定义方法
const exportPDF = () => {
   isShow .value = !isShow .value
  htmlToPdf.getPdf("个人简历")
}

//获取学生个人信息
const getInfo = () => {
  getStudentInfo()
    .then((result) => {
      // console.log(result.result[0])
      studentInfo.value = result.result[0]
      uid.value = result.result[0].user_id
    })
    .catch((err) => {
      console.log(err)
    })
}
// //获取学生用户头像
// const getPicture = () => {
//   const param = {
//     uid: 2,
//   }
//   getStudentPicture(param)
//     .then((result) => {
//       avatar.value = result.result[0].avatar
//     })
//     .catch((err) => {
//       console.log(err)
//     })
// }

// 生命周期钩子
onMounted(() => {
  getInfo()
  // getPicture()
})
</script>

<style lang="scss" scoped>
.container {
  .isShow {
    display: none;
  }

  width: 80%;
  height: 1000px;
  margin: 0 auto;
  .head {
    height: 25px;
    background-color: cadetblue;
    display: flex;
    position: relative;
    .head-title {
      position: absolute;
      right: 25px;
      width: 100px;
      height: 100%;
      background-color: #d8bfd8;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .head-content {
      margin-top: 30px;
      width: 100%;
      height: 150px;
      display: flex;
      align-items: center;
      .img {
        flex: 0 0 10px;
        img {
          width: 100px;
          height: 125px;
        }
      }

      .info {
        flex: 1;
        margin-left: 30px;

        .name {
          font-size: 50px;
        }

        .info-top {
          ::v-deep .svg-icon {
            font-size: 35px;
          }
        }

        .info-top {
          display: flex;
          align-items: center;
        }

        .info-down {
          margin-top: 20px;
          display: flex;
          .age,
          .phone {
            margin-right: 55px;
          }
        }
      }
    }
  }

  .content {
    margin-top: 180px;
    width: 100%;
    height: 20px;
    .content-list {
      ::v-deep .n-input {
        margin-top: -5px;
      }

      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 120px;
      margin-bottom: 15px;
      .content-list-title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 30px;
        background-color: #dcdcdc;
      }

      .content-list-content {
        margin-top: 5px;
        border: 1px solid black;
        width: 100%;
        height: 150px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: space-around;
  }
}
</style>
